<template>
  <div class="tip-panel-modal">
    <je-modal
      v-model:visible="isShow"
      :title="recordData.label"
      width="460px"
      height="auto"
      button-align="right"
      :resize="false"
      :maximizable="false"
      :ok-button="cancelButton"
      @close="cancelButton"
    >
      <div>{{ recordData.unitTpl }}</div>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent } from 'vue';
  import { Modal } from '@jecloud/ui';

  export default defineComponent({
    name: 'TipViewPanel',
    components: {
      JeModal: Modal,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      mouseNowData: {
        type: Object,
        required: true,
      },
    },
    emits: ['changeTipShow'],
    setup(props, { emit }) {
      const isShow = ref(props.visble);
      // 父组件传过来的node数据
      const recordData = ref(props.mouseNowData);
      const methods = {
        // 点击取消
        cancelButton() {
          // 1刷新列表
          emit('changeTipShow');
        },
      };
      return {
        isShow,
        recordData,
        ...methods,
      };
    },
  });
</script>
<style lang="less">
  .tip-panel-modal {
    > .je-modal--body {
      padding: 0 20px !important;
    }
    .tip-item {
      display: flex;
      vertical-align: bottom;
      border-top: 1px solid #e6e6e6;
      border-left: 1px solid #e6e6e6;
      border-right: 1px solid #e6e6e6;
      padding: 10px;
      .img {
        width: 80px;
        height: 60px;
        margin-right: 20px;
      }
    }
  }
</style>
